<template>
    <!-- 报表绑定 -->
    <div class="report-bind">
        <!-- 报表配置 -->
        <h3 class="field-bind-title">报表渲染方式</h3>
        <el-radio-group v-model="reportData.reportOption.reportRenderingType" @change="handleRenderingType">
            <el-radio-button label="normal">正常</el-radio-button>
            <el-radio-button label="lazy">延迟加载</el-radio-button>
            <el-radio-button label="multipage">多页面</el-radio-button>
        </el-radio-group>
        <el-select v-if="reportData.reportOption.reportRenderingType === 'multipage'" v-model="reportData.reportOption.api" size="mini" placeholder='选择API配置的数据地址' clearable>
            <el-option v-for="(item, index) in reportData.Api.options" :key="index" :label="item.api" :value="item.api"></el-option>
        </el-select>
        <el-divider></el-divider>
        <!-- 备注 -->
        <h3 class="field-bind-title">报表备注</h3>
        <el-input v-model="reportData.remark" type="textarea" :rows="2" placeholder="报表备注" clearable></el-input>
        <el-divider></el-divider>
        <!-- 积木报表ID -->
        <h3 class="field-bind-title">插件报表绑定ID</h3>
        <el-input v-model="reportData.reportOption.plugInID" type="textarea" :rows="2" placeholder="插件报表绑定ID" clearable></el-input>
        <el-divider></el-divider>
        <!-- 分组绑定 -->
        <h3 class="field-bind-title">当前分组配置</h3>
        <div class="button">
            <el-button type="primary" @click.stop="setGroup()">设置分组绑定</el-button>
        </div>
        <div class="option-data">
            <li v-for="(item, index) in reportData.bindDict.options" :key="index">
                <div class="li-item">
                    <span class="label">绑定组：</span>
                    <span class="text">{{ dictTypeDict(item.dictType) }}</span>
                </div>
                <div class="li-item">
                    <span class="label">绑定字典：</span>
                    <span class="text">{{ item.dictLabel }}</span>
                </div>
                <div class="li-item">
                    <span class="label">状态：</span>
                    <span class="text">
                        <el-tag :type="handleTagType(item.bindStatus)">{{ hanleTagText(item.bindStatus) }}</el-tag>
                    </span>
                </div>
            </li>
        </div>
        <!-- 设置分组 -->
        <set-group ref="setGroup" :reportData="reportData" @bind="bind"></set-group>
    </div>
</template>

<script>
import { setGroup } from "./components/index";
import * as _ from 'lodash';
import bindMixin from "./mixin/index";
export default {
    name: "ReportBind",
    mixins: [bindMixin],
    props: {
        reportData: {
            type: Object
        },
        temporaryBind: {
            type: Object
        }
    },
    components: {
        setGroup
    },
    methods: {
        setGroup() {
            this.$refs.setGroup.open(_.cloneDeep(this.reportData.bindDict.options));
        },
        bind(data) {
            let options = _.cloneDeep(data) || [];
            // 1.处理 reportData 对象中的 bindDict 绑定数据
            this.reportData.bindDict.options.length = 0;
            this.reportData.bindDict.options = options.map(item => {
                return {
                    dictCode: item.dictCode,
                    dictType: item.dictType,
                    dictLabel: item.dictLabel,
                    dictSort: item.dictSort,
                    status: item.status,
                    bindStatus: item.bindStatus
                }
            })
            // 2.处理 临时绑定报表ID ？！（新增报表无ID 需要保存后执行后续绑定操作）
            this.temporaryBind.options.length = 0;
            this.temporaryBind.options = options;
            // 3. 如果是编辑状态需要自动保存一下
            if (this.$route.query.id) this.$emit('save');
        },
        handleRenderingType() {
            this.reportData.reportOption.api = "";
        }
    }
}
</script>
